<template>
  <div class="switch-layer box1 custom-scrollbar">
    <div
      class="layer-item"
      v-for="item of list"
      :key="item.id"
      :class="{ active: currentLayerId == item.id }"
      @click="handleItemClick(item)"
    >
      <div class="name">{{ item.layer_name }}</div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, watch } from "@vue/runtime-core";
import { useRoute, useRouter } from "vue-router";

export default defineComponent({
  name: "SwitchLayer3D",
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  setup(props) {
    const $route = useRoute();
    const $router = useRouter();
    const state = reactive({
      currentLayerId: $route.query.layerId,
    });

    const handleItemClick = (current) => {
      state.currentLayerId = current.id;
      // console.log("handleItemClick", $route.path, $route.query);
      const query = { ...$route.query };
      query.layerId = current.id;
      $router.replace({
        path: $route.path,
        query,
      });
    };

    watch(
      () => $route.query.layerId,
      (val, preval) => {
        if (val != preval) {
          location.reload();
        }
      }
    );

    watch(
      () => props.list,
      (list) => {
        if (list.length && !state.currentLayerId) {
          state.currentLayerId = list[0].id;
        }
      }
    );

    return {
      ...toRefs(state),
      handleItemClick,
    };
  },
});
</script>

<style lang="less" scoped>
@import "../index.less";
.switch-layer {
  position: fixed;
  z-index: 100;
  right: 80px;
  bottom: 20px;
  max-width: calc(~"100vw - 460px");
  overflow: auto hidden;
  padding: 15px 10px;
  white-space: nowrap;
  scroll-behavior: smooth;
  background: rgba(0, 0, 0, 0.4) !important;
  .layer-item {
    // border: 1px solid @mainColor;
    display: inline-block;
    min-width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    padding: 0 8px;
    margin: 0 10px;
    background: rgba(6, 183, 243, 0.1);
    box-shadow: 0 0 4px 2px rgba(6, 183, 243, 0.4);
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
  }
  .active {
    // color: @mainColor;
    transform: scale(1.2);
    // border: 1px solid @mainColor;
    box-shadow: 0 0 4px 2px rgba(6, 183, 243, 0.8);
    background: rgba(6, 183, 243, 0.6);
    font-size: 20px;
  }
}
</style>
